import React from "react";
import { useArticleList } from "./useArticleList";
import useNavArticle from "@/hooks/useNavArticle";
import ListQueryBox from "../ListQueryBox/ListQueryBox";
import style from './ArticleList.module.scss'

export default function ArticleList(): React.ReactElement {
  const { articleList, pagination, tagChange, categoryChange, goToPage } =
    useArticleList();
  const { goToArticleInfo } = useNavArticle();
  return (
    <div className={style['lx__list-wrap']}>
      <ListQueryBox tagChange={tagChange} categoryChange={categoryChange}/>
      <div className={style['article-list-box']}>{
        articleList.map(article=>
          <div
          className={style['article-item']}
          key={article.id}
        >
          <div className={style['article-box']} onClick={()=>goToArticleInfo(article)}>
          <img src={article.thumbnail} className={style['article-img']} />

          <div className={`${style['article-title']} text--over`}>{ article.title }</div>
          <div className={`${style['article-meta']} flex`}>
            <span>
              <i className={`iconfont icon-ego-hot ${style['hot-icon']}`}></i>
              { article.viewCount || 0} 热度
            </span>
            <span>
              <i className={`iconfont icon-pinglun1 ${style['comment-icon']}`}></i>
              { article.commentCount || 0 } 条评论
            </span>
            <span>
              <i className={`iconfont icon-dianzan ${style['star-icon']}`}></i>
              { article.star || 0 } 点赞
            </span>
          </div>
                
          <div className={`${style['article-label']} flex`}>
            {
              article.categoryName&&  <span>
              <i
                className={`iconfont icon-leimupinleifenleileibie2 ${style['category-icon']}`}
              ></i>
              { article.categoryName || "" }
            </span>
            }
             {
             article.tagList?.length&&   <span  className="ml-10">
             <i className={`iconfont icon-biaoqian1 ${style['label-icon']}`}></i>
             {
               article.tagList
                 ? article.tagList
                     .slice(0, 2)
                     .map((item) => item.tagName)
                     .join(" ")
                 : ""
             }
           </span>
             }
         
          </div>

          <div className={`${style['article-time']} ${style['article-meta']}`}>
            <i className={`iconfont icon-shengchanjihua ${style['time-icon']}`}></i>
            发布于 { article.createTime }
          </div>
          </div>
        </div>
          )
      }</div>
      <div className={`${style['pagination-box']} flex flex--c`}>
        {
          pagination.total > articleList.length&&  <div
          className={style['next-page-btn']}
          onClick={()=>goToPage()}
        
        >
          下一页
        </div>
        }
      
        {
          articleList.length && articleList.length >= pagination.total&&<div
          className={style['end-text']}
         
        >
          ~~到底了
        </div>
        }
        {
          !articleList.length&&  <div  className={style['end-text']} >
          ~~空空如也
        </div>
        }
      
      </div>
    </div>
  );
}
